<template>
  <view class="index_warp">
    <view class="score_warp flex_y_a">
      <view class="title">点击星星评分</view>
      <view class="score">
        <u-rate active-color="#ffd21e" inactive-color="#eee" gutter="20"
          :value="5" :size="60" :allowHalf="true" @change="onChange"></u-rate>
      </view>
    </view>
    <view class="text_warp">
      <textarea name="" id="" class="content" placeholder="请输入不少于10个字的描述"
        v-model="value" auto-focus
        placeholder-style="height:40upx;line-height: 40upx;"></textarea>
      <view class="num">{{value.length}}/200</view>
    </view>
    <view class="up_warp">
      <view class="submit_btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
  import {
    sendComment
  } from '@/api/course'
  import {
    showToast
  } from '@/utils/util'
  export default {
    data() {
      return {
        value: '',
        score: 5,
        courseId: ''
      };
    },
    onLoad(options) {
      this.courseId = options.courseId
    },
    methods: {
      // 点击星星
      onChange(e) {
        this.score = e
      },
      submit() {
        const {
          courseId,
          value,
        } = this
        if (value.length < 10) {
          showToast({
            title: '描述不能少于10个字！'
          })
          return
        }
        sendComment({
          courseId,
          content: value,
        }).then(res => {
          showToast({
            title: '评论成功！'
          })
          setTimeout(() => {
            // #ifdef APP-NVUE
            const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
            // #endif
            // #ifndef APP-NVUE
            const eventChannel = this.getOpenerEventChannel();
            // #endif
            eventChannel.emit('someEvent', {

            });
            wx.navigateBack({
              delta: 1,
            })
          }, 1500)
        })
      },
    }

  }
</script>

<style lang="scss" scoped>
  .index_warp {
    .score_warp {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .title {
        height: 40upx;
        margin-top: 20upx;
        line-height: 40upx;
        font-weight: 500;
        line-height: 40upx;
        color: #666666;
      }

      .score {
        margin-top: 40upx;
      }
    }

    .text_warp {
      margin-top: 32upx;
      width: 750upx;
      height: 280upx;
      background: #ffffff;
      opacity: 1;
      position: relative;

      .content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 30upx 50upx;
        line-height: 40upx;
      }

      .num {
        position: absolute;
        right: 30upx;
        bottom: 20upx;
        height: 34upx;
        font-size: 24upx;
        font-weight: 500;
        line-height: 34upx;
        color: #999999;
      }
    }

    .up_warp {
      margin-top: 20upx;
      padding: 0 30upx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .up_item {
        width: 210upx;
        height: 210upx;
        background: #ffffff;
        border-radius: 20upx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24upx;
        position: relative;

        .delete_icon {
          width: 30upx;
          height: 30upx;
          background-color: #e94242;
          color: #fff;
          position: absolute;
          right: -15upx;
          top: -15upx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &:nth-child(n + 2) {
          margin: 0 27.5upx 24upx;
        }

        image {
          border-radius: 20upx;
        }

        .add_img {
          width: 44%;
          height: 44%;
        }
      }

      .submit_btn {
        position: fixed;
        left: 30upx;
        bottom: 10upx;
        width: 690upx;
        height: 100upx;
        background: #0058a3;
        font-size: 36upx;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50upx;
        margin-top: 300upx;
      }
    }
  }
</style>
